import axios from 'axios';
import styled from 'styled-components';
import React from 'react';
import {Form, Input, Modal, InputNumber, Select, toast} from 'acud';
import {BaseUrl} from '.';

const Option = Select.Option;

const ModalWrapper = styled(Modal)`
    .acud-input,
    .acud-select,
    .acud-input-number {
        width: 240px !important;
    }
`;

const FormItem = Form.Item;

interface FormProps {
    visible: boolean;
    setVisible: any;
    options: any[];
    onAfter: () => void;
}

const KindModal: React.FC<FormProps> = (props) => {
    const {visible, setVisible, options, onAfter} = props;
    const [form] = Form.useForm();

    const onCancel = () => {
        setVisible(false);
    };

    // 添加
    const handleOk = async () => {
        try {
            const values = await form.validateFields();
            await axios.post(`${BaseUrl}/projects`, values);
            toast.success({message: '添加成功', duration: 3});
            onCancel();
            form.resetFields();
            onAfter();
        }
        catch (error) {

        }
    };

    return (
        <ModalWrapper
            title="新增种类"
            visible={visible}
            destroyOnClose
            onCancel={onCancel}
            height={300}
            onOk={handleOk}
        >
            <Form
                form={form}
                name="dynamic_form_nest_item"
                labelWidth={60}
                labelAlign="left"
                autoComplete="off"
            >
                <Form.Item
                    label="种类"
                    rules={[{required: true}]}
                    name="type"
                >
                    <Select placeholder="请选择类型" style={{width: 300}}>
                        {options.map((level) => (
                            <Option key={level.name} value={level.type}>
                                {level.name}
                            </Option>
                        ))}
                    </Select>
                </Form.Item>
                <FormItem name="name" label="名称">
                    <Input />
                </FormItem>
                <FormItem name="priceq" label="价格">
                    <InputNumber />
                </FormItem>
            </Form>
        </ModalWrapper>
    );
};

export default KindModal;
